import React, { useEffect } from "react";
import { Button as AntdButton } from "antd-mobile";
import fetchData from "../../utils/fetchData";
import { useCreation, useRequest } from "ahooks";
import { useIdlePlugin, usePerformancePlugin } from "../../ahooksPlugin";

const idleFetchData = (params) => {
  return Promise.all([fetchData({ params }), fetchData({ params, timeout: 2000 })]);
};

const Button = (props) => {
  const { id } = props;

  const { loading, error } = useRequest(
    idleFetchData,
    {
      manual: true,
      prefetchReady: Boolean(id),
      optName: "buttonIdle",
    },
    [useIdlePlugin, usePerformancePlugin]
  );

  const { loading: clickLoading, run } = useRequest(
    () => fetchData({}),
    {
      manual: true,
      optName: "buttonClick",
      loadingDelay: 100,
    },
    [usePerformancePlugin]
  );

  if (loading) {
    return <div>骨架屏中</div>;
  }

  if (error) {
    return <div>error</div>;
  }

  return (
    <AntdButton
      block
      color="primary"
      size="large"
      loading={clickLoading}
      loadingText={"加载中"}
      onClick={() => {
        run();
      }}
    >
      button-{id}-data-{"加载成功"}
    </AntdButton>
  );
};

export default React.memo(Button);
